﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        /* 外面盒子样式---自己定义 */
        .page_div {
            margin: 20px 10px 20px 0;
            color: #666;
        }
            /* 页数按钮样式 */
            .page_div button {
                display: inline-block;
                min-width: 50px;
                height: 28px;
                cursor: pointer;
                color: #666;
                font-size: 13px;
                line-height: 28px;
                background-color: #f9f9f9;
                border: 1px solid #dce0e0;
                text-align: center;
                margin: 0 4px;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
            }

        #firstPage, #lastPage, #nextPage, #prePage {
            width: 50px;
            color: #0073A9;
            border: 1px solid #0073A9;
        }

        #nextPage, #prePage {
            width: 70px;
        }

        .page_div .current {
            background-color: #0073A9;
            border-color: #0073A9;
            color: #FFF;
        }
        /* 页面数量 */
        .totalPages {
            margin: 0 10px;
        }

            .totalPages span, .totalSize span {
                color: #0073A9;
                margin: 0 5px;
            }
        /*button禁用*/
        .page_div button:disabled {
            opacity: .5;
            cursor: no-drop;
        }
    </style>
</head>

<body>
    <div id="page" class="page_div"></div>
</body>
<script src="http://www.bootstrapmb.com/content/js/jquery.min.js"></script>
<script type="text/javascript" src="../js/pageMe.js"></script>
<script>
   
    $("#page").paging({
        pageNum: 1, /*当前页面*/
        totalNum: 14, /*总页码*/
        totalList: 300, /*记录总数量*/
        callback: function (num) { 
            console.log(num);
        }
    });
</script>
</html>